<div class="mui-content bg_linear">
  <img src="./assets/images/banner2.jpg" class="img img-reactive">
  <div class="info-container">
    <div class="mui-card">
      <div class="mui-card-content mui-input-group input-group_right">
        <div class="mui-row">
          <div class="mui-col-xs-3 mui-text-center input-title">贷款类型</div>
          <div class="mui-col-xs-9">
            <label class="mui-btn" [ngClass]="{'mui-btn-primary': userInfo.type == '1'}">
              <input type="radio" value="1" name="type" [(ngModel)]="userInfo.type">信用贷</label>
            <label class="mui-btn" [ngClass]="{'mui-btn-primary': userInfo.type == '2'}">
              <input type="radio" value="2" name="type" [(ngModel)]="userInfo.type">购车贷</label>
            <label class="mui-btn" [ngClass]="{'mui-btn-primary': userInfo.type == '3'}">
              <input type="radio" value="3" name="type" [(ngModel)]="userInfo.type">购房贷</label>
            <label class="mui-btn" [ngClass]="{'mui-btn-primary': userInfo.type == '4'}">
              <input type="radio" value="4" name="type" [(ngModel)]="userInfo.type">房产抵押贷</label>
            <label class="mui-btn" [ngClass]="{'mui-btn-primary': userInfo.type == '5'}">
              <input type="radio" value="5" name="type" [(ngModel)]="userInfo.type">车辆抵押贷</label>
            <label class="mui-btn" [ngClass]="{'mui-btn-primary': userInfo.type == '6'}">
              <input type="radio" value="6" name="type" [(ngModel)]="userInfo.type">贵重资产抵押贷</label>
          </div>
        </div>
        <div class="mui-row">
          <div class="mui-col-xs-3 mui-text-center input-title">贷款金额</div>
          <div class="mui-col-xs-8">
            <input type="number" placeholder="最高10,000,000" [(ngModel)]="userInfo.amount">
          </div>
          <div class="mui-col-xs-1">元</div>
        </div>
        <div class="mui-row">
          <div class="mui-col-xs-3 mui-text-center input-title">贷款周期</div>
          <div class="mui-col-xs-8">
            <input type="number" placeholder="最高360" [(ngModel)]="userInfo.cycle">
          </div>
          <div class="mui-col-xs-1">月</div>
        </div>
        <div class="mui-row">
          <div class="mui-col-xs-3 mui-text-center input-title">真实姓名</div>
          <div class="mui-col-xs-9">
            <input type="text" [(ngModel)]="userInfo.realname" placeholder="请输入真实姓名">
          </div>
        </div>
        <div class="mui-row">
          <div class="mui-col-xs-3 mui-text-center input-title">性别</div>
          <div class="mui-col-xs-9">
            <label class="mui-btn" [ngClass]="{'mui-btn-primary': userInfo.gender == '1'}">
              <input type="radio" value="1" name="gender" [(ngModel)]="userInfo.gender">男</label>
            <label class="mui-btn" [ngClass]="{'mui-btn-primary': userInfo.gender == '2'}">
              <input type="radio" value="2" name="gender" [(ngModel)]="userInfo.gender">女</label>
          </div>
        </div>
        <div class="mui-row">
          <div class="mui-col-xs-3 mui-text-center input-title">身份证号</div>
          <div class="mui-col-xs-9">
            <input type="text" placeholder="请输入正式有效身份证号" [(ngModel)]="userInfo.idcard">
          </div>
        </div>
        <div class="mui-row">
          <div class="mui-col-xs-3 mui-text-center input-title">学历</div>
          <div class="mui-col-xs-9">
            <label class="mui-btn" [ngClass]="{'mui-btn-primary': userInfo.education == '1'}">
              <input type="radio" value="1" name="education" [(ngModel)]="userInfo.education">大专以下</label>
            <label class="mui-btn" [ngClass]="{'mui-btn-primary': userInfo.education == '2'}">
              <input type="radio" value="2" name="education" [(ngModel)]="userInfo.education">大专</label>
            <label class="mui-btn" [ngClass]="{'mui-btn-primary': userInfo.education == '3'}">
              <input type="radio" value="3" name="education" [(ngModel)]="userInfo.education">本科</label>
            <label class="mui-btn" [ngClass]="{'mui-btn-primary': userInfo.education == '4'}">
              <input type="radio" value="3" name="education" [(ngModel)]="userInfo.education">硕士研究生以上</label>
          </div>
        </div>
        <div class="mui-row">
          <div class="mui-col-xs-3 mui-text-center input-title">房产情况</div>
          <div class="mui-col-xs-9">
            <label class="mui-btn" [ngClass]="{'mui-btn-primary': userInfo.housetype == '1'}">
              <input type="radio" value="1" name="housetype" [(ngModel)]="userInfo.housetype">有房无房贷</label>
            <label class="mui-btn" [ngClass]="{'mui-btn-primary': userInfo.housetype == '2'}">
              <input type="radio" value="2" name="housetype" [(ngModel)]="userInfo.housetype">有房有房贷</label>
            <label class="mui-btn" [ngClass]="{'mui-btn-primary': userInfo.housetype == '3'}">
              <input type="radio" value="3" name="housetype" [(ngModel)]="userInfo.housetype">无房</label>
          </div>
        </div>
        <div class="mui-row">
          <div class="mui-col-xs-3 mui-text-center input-title">车产情况</div>
          <div class="mui-col-xs-9">
            <label class="mui-btn" [ngClass]="{'mui-btn-primary': userInfo.cartype == '1'}">
              <input type="radio" value="1" name="cartype" [(ngModel)]="userInfo.cartype">有车无车贷</label>
            <label class="mui-btn" [ngClass]="{'mui-btn-primary': userInfo.cartype == '2'}">
              <input type="radio" value="2" name="cartype" [(ngModel)]="userInfo.cartype">有车有车贷</label>
            <label class="mui-btn" [ngClass]="{'mui-btn-primary': userInfo.cartype == '3'}">
              <input type="radio" value="3" name="cartype" [(ngModel)]="userInfo.cartype">无车</label>
          </div>
        </div>
        <div class="mui-row">
          <div class="mui-col-xs-3 mui-text-center input-title">寿险情况</div>
          <div class="mui-col-xs-9">
            <label class="mui-btn" [ngClass]="{'mui-btn-primary': userInfo.insurance == '1'}">
              <input type="radio" value="1" name="insurance" [(ngModel)]="userInfo.insurance">有</label>
            <label class="mui-btn" [ngClass]="{'mui-btn-primary': userInfo.insurance == '2'}">
              <input type="radio" value="2" name="insurance" [(ngModel)]="userInfo.insurance">无</label>
          </div>
        </div>
        <div class="mui-row">
          <div class="mui-col-xs-3 mui-text-center input-title">要查征信</div>
          <div class="mui-col-xs-9">
            <label class="mui-btn" [ngClass]="{'mui-btn-primary': userInfo.credit == '1'}">
              <input type="radio" value="1" name="credit" [(ngModel)]="userInfo.credit">有</label>
            <label class="mui-btn" [ngClass]="{'mui-btn-primary': userInfo.credit == '2'}">
              <input type="radio" value="2" name="credit" [(ngModel)]="userInfo.credit">无</label>
          </div>
        </div>
        <div class="mui-row">
          <div class="mui-col-xs-3 mui-text-center input-title">职业</div>
          <div class="mui-col-xs-9">
            <label class="mui-btn" [ngClass]="{'mui-btn-primary': userInfo.occupation == '上班族'}">
              <input type="radio" value="上班族" name="occupation" [(ngModel)]="userInfo.occupation">上班族</label>
            <label class="mui-btn" [ngClass]="{'mui-btn-primary': userInfo.occupation == '公务员'}">
              <input type="radio" value="公务员" name="occupation" [(ngModel)]="userInfo.occupation">公务员</label>
            <label class="mui-btn" [ngClass]="{'mui-btn-primary': userInfo.occupation == '私企业主'}">
              <input type="radio" value="私企业主" name="occupation" [(ngModel)]="userInfo.occupation">私企业主</label>
          </div>
        </div>
        <div class="mui-row">
          <div class="mui-col-xs-3 mui-text-center input-title">工作时间</div>
          <div class="mui-col-xs-9">
            <label class="mui-btn" [ngClass]="{'mui-btn-primary': userInfo.workinglife == '6个月内'}">
              <input type="radio" value="6个月内" name="workinglife" [(ngModel)]="userInfo.workinglife">6个月内</label>
            <label class="mui-btn" [ngClass]="{'mui-btn-primary': userInfo.workinglife == '12个月内'}">
              <input type="radio" value="12个月内" name="workinglife" [(ngModel)]="userInfo.workinglife">12个月内</label>
            <label class="mui-btn" [ngClass]="{'mui-btn-primary': userInfo.workinglife == '一年以上'}">
              <input type="radio" value="一年以上" name="workinglife" [(ngModel)]="userInfo.workinglife">一年以上</label>
          </div>
        </div>
        <div class="mui-row">
          <div class="mui-col-xs-3 mui-text-center input-title">月收入</div>
          <div class="mui-col-xs-9">
            <label class="mui-btn" [ngClass]="{'mui-btn-primary': userInfo.monthlyincome == '2千以下'}">
              <input type="radio" value="2千以下" name="monthlyincome" [(ngModel)]="userInfo.monthlyincome">2千以下</label>
            <label class="mui-btn" [ngClass]="{'mui-btn-primary': userInfo.monthlyincome == '2千~5千'}">
              <input type="radio" value="2千~5千" name="monthlyincome" [(ngModel)]="userInfo.monthlyincome">2千~5千</label>
            <label class="mui-btn" [ngClass]="{'mui-btn-primary': userInfo.monthlyincome == '5千以上'}">
              <input type="radio" value="5千以上" name="monthlyincome" [(ngModel)]="userInfo.monthlyincome">5千以上</label>
          </div>
        </div>
        <div class="mui-row">
          <div class="mui-col-xs-3 mui-text-center input-title">是否用过微粒贷</div>
          <div class="mui-col-xs-9">
            <label class="mui-btn" [ngClass]="{'mui-btn-primary': userInfo.webank == '1'}">
              <input type="radio" value="1" name="webank" [(ngModel)]="userInfo.webank">是</label>
            <label class="mui-btn" [ngClass]="{'mui-btn-primary': userInfo.webank == '2'}">
              <input type="radio" value="2" name="webank" [(ngModel)]="userInfo.webank">否</label>
          </div>
        </div>
        <div class="mui-row">
          <div class="mui-col-xs-3 mui-text-center input-title">工资发放形式</div>
          <div class="mui-col-xs-9">
            <label class="mui-btn" [ngClass]="{'mui-btn-primary': userInfo.payrolltype == '1'}">
              <input type="radio" value="1" name="payrolltype" [(ngModel)]="userInfo.payrolltype">现金发放</label>
            <label class="mui-btn" [ngClass]="{'mui-btn-primary': userInfo.payrolltype == '2'}">
              <input type="radio" value="2" name="payrolltype" [(ngModel)]="userInfo.payrolltype">银行转账</label>
          </div>
        </div>
        <div class="mui-row">
          <div class="mui-col-xs-3 mui-text-center input-title">公积金</div>
          <div class="mui-col-xs-9">
            <label class="mui-btn" [ngClass]="{'mui-btn-primary': userInfo.accumulationfund == '1'}">
              <input type="radio" value="1" name="accumulationfund" [(ngModel)]="userInfo.accumulationfund">一年以内</label>
            <label class="mui-btn" [ngClass]="{'mui-btn-primary': userInfo.accumulationfund == '2'}">
              <input type="radio" value="2" name="accumulationfund" [(ngModel)]="userInfo.accumulationfund">一年以上</label>
            <label class="mui-btn" [ngClass]="{'mui-btn-primary': userInfo.accumulationfund == '3'}">
              <input type="radio" value="3" name="accumulationfund" [(ngModel)]="userInfo.accumulationfund">无公积金</label>
          </div>
        </div>
        <div class="mui-row">
          <div class="mui-col-xs-3 mui-text-center input-title">社保</div>
          <div class="mui-col-xs-9">
            <label class="mui-btn" [ngClass]="{'mui-btn-primary': userInfo.socialsecurity == '1'}">
              <input type="radio" value="1" name="socialsecurity" [(ngModel)]="userInfo.socialsecurity">有</label>
            <label class="mui-btn" [ngClass]="{'mui-btn-primary': userInfo.socialsecurity == '2'}">
              <input type="radio" value="2" name="socialsecurity" [(ngModel)]="userInfo.socialsecurity">无</label>
          </div>
        </div>
        <div class="mui-row">
          <div class="mui-col-xs-3 mui-text-center input-title">信用卡</div>
          <div class="mui-col-xs-9">
            <label class="mui-btn" [ngClass]="{'mui-btn-primary': userInfo.linecard == '1'}">
              <input type="radio" value="1" name="linecard" [(ngModel)]="userInfo.linecard">有</label>
            <label class="mui-btn" [ngClass]="{'mui-btn-primary': userInfo.linecard == '2'}">
              <input type="radio" value="2" name="linecard" [(ngModel)]="userInfo.linecard">无</label>
          </div>
        </div>
        <div class="mui-row">
          <div class="mui-col-xs-3 mui-text-center input-title">请选择省市</div>
          <div class="mui-col-xs-9 m-0">
            <select class="m-0" [(ngModel)]="userInfo.province" (change)="getArea($event)">
              <option value="">请选择</option>
              <option *ngFor="let city of _cityList" value="{{city.value}}">{{city.text}}</option>
            </select>
            <span class="mui-icon mui-icon-arrowdown"></span>
          </div>
        </div>

        <div class="mui-row">
          <div class="mui-col-xs-3 mui-text-center input-title">选择地区</div>
          <div class="mui-col-xs-9 m-0">
            <select class="m-0" [(ngModel)]="userInfo.city" >
              <option value="">请选择</option>
              <option *ngFor="let city of areaList" value="{{city.value}}" >{{city.text}}</option>
            </select>
            <span class="mui-icon mui-icon-arrowdown"></span>
          </div>
        </div>



      </div>
    </div>
    <div class="container">
      <button type="button" class="mui-btn mui-btn-warning mui-btn-block" (click)="setInfo()">确定</button>
    </div>
    <div class="container" style="color: #f59191;">
      <div>我确定并了解本次<a [routerLink]="['/member/role']">活动规则</a>及<a [routerLink]="['/member/shouming']">信息安全说明</a></div>
      <div>您提供的个人信息仅供本次活动使用，我们不会泄露给任何第三方或其他用途</div>
    </div>
  </div>

  <div class="container" *ngIf="userInfo.uid">
    <img src="./assets/images/slogan.png" class="img img-reactive">
  </div>
</div>
